import React, { useState } from 'react'
import { View, StyleSheet, FlatList, Pressable, Modal, Platform } from 'react-native'
import NavBar from '@/components/NavBar';
import ImageViewer from 'react-native-image-zoom-viewer';
// import SkeletonContent from 'react-native-skeleton-content';
import { Image as ExpoImage } from 'expo-image'

if (Platform.OS !== 'web') {
  global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
    return 0;
  };
}

const images = [
  { id: '1', url: 'https://picsum.photos/200?1' },
  { id: '2', url: 'https://picsum.photos/200?2' },
  { id: '3', url: 'https://picsum.photos/200?3' },
  { id: '4', url: 'https://picsum.photos/200?4' },
  { id: '5', url: 'https://picsum.photos/200?5' },
  { id: '6', url: 'https://picsum.photos/200?6' },
  { id: '7', url: 'https://picsum.photos/200?7' },
  { id: '8', url: 'https://picsum.photos/200?8' },
  { id: '9', url: 'https://picsum.photos/200?9' },
  { id: '10', url: 'https://picsum.photos/200?10' },
  { id: '11', url: 'https://picsum.photos/200?11' },
  { id: '12', url: 'https://picsum.photos/200?12' },
  { id: '13', url: 'https://picsum.photos/200?13' },
  { id: '14', url: 'https://picsum.photos/200?14' },
  { id: '15', url: 'https://picsum.photos/200?15' },
  { id: '16', url: 'https://picsum.photos/200?16' },
  { id: '17', url: 'https://picsum.photos/200?17' },
  { id: '18', url: 'https://picsum.photos/200?18' },
  { id: '19', url: 'https://picsum.photos/200?19' },
  { id: '20', url: 'https://picsum.photos/200?20' },
  { id: '21', url: 'https://picsum.photos/200?21' },
  { id: '22', url: 'https://picsum.photos/200?22' },
  { id: '23', url: 'https://picsum.photos/200?23' },
  { id: '24', url: 'https://picsum.photos/200?24' },
];

export default function PhotoAlbum() {
  const [visible, setVisible] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  const openImageViewer = (index: number) => {
    setCurrentIndex(index);
    setVisible(true);
  };

  return (

      <View style={styles.container}>
        <NavBar title='相册' style={{ width: '100%' }}></NavBar>
        <FlatList
          showsVerticalScrollIndicator={false}
          data={images}
          renderItem={({ item, index }) => (
            <Pressable 
              onPress={() => openImageViewer(index)}
              style={styles.imageContainer}
            >
              <ExpoImage
                source={{ uri: item.url }}
                style={styles.image}
              />
            </Pressable>
          )}
          keyExtractor={item => item.id}
          numColumns={3}
          contentContainerStyle={styles.listContainer}
        />

        <Modal visible={visible} transparent={true}>
          <ImageViewer
            imageUrls={images.map(img => ({ url: img.url }))}
            index={currentIndex}
            onSwipeDown={() => setVisible(false)}
            enableSwipeDown={true}
            onClick={() => setVisible(false)}
            enablePreload={true}  // 开启预加载
            saveToLocalByLongPress={false}
          />
        </Modal>
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  listContainer: {
    padding: 5,
  },
  imageContainer: {
    flex: 1,
    aspectRatio: 1,
    padding: 2,
  },
  image: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
  },
});
